<template>
  <div class="upload-pic-card">
    <div class="big-img-container">
      <el-carousel
        v-if="fileList && fileList.length"
        class="big-img"
        trigger="click"
        :autoplay="autoplay"
        @change="carouselChange"
        ref="carousel">
        <el-carousel-item v-for="(item, index) in fileList" :key="item.id" :name="String(index)">
          <el-image class="big-img" :src="item.url"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="img-list-container">
      <div class="scroll-list">
        <ul class="img-list">
          <li
            :class="['img-item', carouselIndex === String(index) ? 'active' : '']"
            v-for="(file, index) in fileList"
            :key="file.id"
            @click="handleSwitch(String(index))">
            <img :src="file.url" alt="">
            <span class="icon-btn-container">
            <span
              class="icon-btn"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              class="icon-btn"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
          </li>
        </ul>
      </div>
      <el-upload
        action="#"
        class="img-list-upload"
        :file-list="fileList"
        :show-file-list="false"
        :disabled="disabled"
        :on-change="handleChange"
        list-type="picture-card"
        :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    projectId: {
      type: String,
      default: ''
    },
    projectType: {
      type: String,
      default: '3'
    },
    // 用户uuid
    publishId: {
      type: String,
      default: ''
    },
    remove: {
      type: Function,
      default: null
    },
    getFileFn: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      disabled: false,
      fileList: [],
      carouselIndex: '0',
      autoplay: true
    };
  },
  mounted() {
    this.getFileList();
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
  },
  methods: {
    // 获取图片信息
    async getFileList() {
      if (!this.getFileFn) return;
      // projectType 3轮播图
      const { success, data: {
        data
      }} = await this.getFileFn(this.projectType);
      if (success && data) {
        const list = data.list || [];
        this.fileList = list.map(item => ({
          ...item,
          url: this.$checkUrl(item.projectPath)
        }));
      }
    },
    // 手动切换
    handleSwitch(index) {
      this.carouselIndex = index;
      this.$refs.carousel.setActiveItem(index);
      this.autoplay = false;
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.autoplay = true;
      }, 3000);
    },
    carouselChange(index) {
      this.carouselIndex = index + '';
    },
    // 文件状态改变时的钩子
    handleChange(file) {
      this.fileUpload(file.raw);
      return false;
    },
    // 下载
    handleDownload(file) {
      this.$fileToUpload(file.url, file.projectTitel);
    },
    // 删除
    async handleRemove(file) {
      if (this.$checkType(this.remove) === 'function') {
        this.remove(file);
        return;
      }
      const { success } = await this.$Model.deleteCommon({
        ids: file.id
      });
      if (success) {
        this.$message.success('删除成功');
        const index = this.fileList.findIndex(v => v.id === file.id);
        this.fileList.splice(index, 1);
      }
    },
    // 上传文件
    async fileUpload(file) {
      const fm = new FormData();
      fm.append('file', file);
      this.disabled = true;
      const { success, data: { data }} = await this.$Model.fileUpload(fm);
      this.disabled = false;
      if (success && data) {
        const result = await this.$Model.addCommon({
          projectId: this.projectId,
          projectPath: data,
          projectTitel: file.name.replace(/\.[a-zA-Z]+$/, ''),
          projectType: this.projectType,
          publishId: this.publishId
        });
        if (result.success) {
          this.getFileList();
          this.$message.success('上传成功');
          return;
        }
        this.$Model.fileDelete({ filePath: data });
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/main";
  .upload-pic-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .big-img-container {
      width: 100%;
      height: calc(100% - 110px);
      .big-img {
        width: 100%;
        height: 100%;
        /deep/ .el-carousel__container {
          width: 100%;
          height: 100%;
        }
      }
    }
    .img-list-container {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: center;
    }
    .scroll-list {
      max-width: calc(100% - 110px);
      height: 100%;
      display: flex;
      overflow: auto;
      padding: 8px 0 4px;
    }
    .img-list {
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      .img-item {
        height: 100%;
        width: 100px;
        margin-right: 10px;
        position: relative;
        user-select: none;
        transition: border .2s;
        border: 2px solid transparent;
        border-radius: 8px;
        &.active {
          border: 2px solid $mainColor;
        }
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        .icon-btn-container {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          opacity: 0;
          transition: all .3s;
          cursor: pointer;
          &:hover {
            background-color: rgba(0,0,0,.5);
            opacity: 1;
          }
          .icon-btn {
            font-size: 18px;
            color: #fff;
          }
        }
      }
    }
    .img-list-upload {
      width: 100px;
      height: 100px;
      margin-left: 10px;
      /deep/ .el-upload--picture-card {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
